<template>
	<view>
		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">发布照片</block>
		</cu-custom> -->
		<view class="wrap" v-if="showContent">
			<form @submit="formSubmit">
				<view class="bg-white">
					<view class="content">
						<view class="">
							内容：
						</view>
						<textarea class="text-title" type="text" name='value' :value="value" @input="textInput" />
					</view>
					<upimg-box @callParent="callImgList" @callVadio="callVadio" :defaultImgsList="[]"></upimg-box>
					<!-- <view>板块分类：</view> -->
					<!-- <view class="content">
						<vgt-tab :list="navlist" @onValueChange="onValueChange"></vgt-tab>
						分类已选择：<input class="uni-input" name="input" disabled="true" :value="navvalue" />
					</view> -->
					<view class="" style="display: flex;align-items: center;">
						显示当前位置:<u-switch v-model="addressType" @change="changeAdress"></u-switch>
					</view>
					<view class="addressRight">
						{{adressValue}}
					</view>
					<view class="padding ">
						<button type="primary" :disabled="userInfo.username == 'undefined' ? true : false"
							form-type="submit">发布</button>
					</view>
					<view class="text-gray flex justify-center jiacu">发布的照片审核通过后才会显示。</view>
				</view>
			</form>
		</view>
		<view v-else style="height:100vh;text-align: center;">
			<view class="comment" v-for="(res, index) in commentList" :key="res.id">
				<view class="left">
					<image :src="res.url" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="top">
						<view class="name">{{ res.name }}</view>
						<view class="like" :class="{ highlight: res.isLike }">
							<view class="num">{{ res.likeNum }}</view>
							<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"
								@click="getLike(index)"></u-icon>
							<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
						</view>
					</view>
					<view class="content">{{ res.contentText }}</view>
					<view class="reply-box">
						<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
							<view class="username">{{ item.name }}</view>
							<view class="text">{{ item.contentStr }}</view>
						</view>
						<view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
							共{{ res.allReply }}条回复
							<u-icon class="more" name="arrow-right" :size="26"></u-icon>
						</view>
					</view>
					<view class="bottom">
						{{ res.date }}
						<view class="reply">回复</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 模拟弹窗 -->
		<u-modal :show-cancel-button="true" v-model="confirmShow" :content="confirmContent" @confirm="confirm">
		</u-modal>
		<!-- 模拟提示 -->
		<u-toast ref="uToast" />
		<u-popup v-model="show" mode="center" :mask-close-able="false" border-radius="24" width="580">
			<view class="padding-xl">
				<view>当前进度：</view>
				<u-line-progress active-color="#2979ff" height="20" :percent="progress"></u-line-progress>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import upimgBox from "@/components/upimgbox.vue";
	import mdate from "@/common/date.js";
	import wButton from '@/components/watch-login/watch-button.vue';
	import {
		mapGetters
	} from 'vuex';
	var app = getApp()
	export default {
		components: {
			upimgBox,
			wButton
		},
		computed: {
			// ...mapGetters(['userInfo'])
		},
		data: function() {
			return {
				username: '',
				isRotate: false,
				// 按钮动画是否旋转
				unLogin: true,
				imgsList: [],
				list: [{
					name: '发布帖子'
				}, {
					name: '发布视频'
				}],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				video: {
					content: '',
					video_src: '',
					video_img: '',
					love_num: 0,
					comm_num: 0,
					redo_num: 0,
					add_time: '',
					update_time: '',
					userid: '',
					status: 1
				},
				srcVideo: '',
				videoShow: true,
				confirmShow: false,
				confirmContent: '',
				show: false,
				showContent: false,
				progress: 0,
				navvalue: "",
				value: '',
				navlist: ['学生', '你好', '停止'],
				commentList: [],
				userInfo: {},
				addressType: false,
				adressValue: '',
				addinfo: '',
				GAODE_URL: 'https://restapi.amap.com/v3/geocode/regeo',
				GAODE_MAP_KEY: '9868d60a7c260f5182f44268f780a9d5'
			}
		},
		onLoad: function() {
			this.getShow()
			this.userInfo = uni.getStorageSync('userInfo')
			this.username = this.userInfo.username || this.$store.getters.userInfo.username;
		},
		methods: {
			changeAdress(e) {
				var that = this
				if (e) {
					let addinfo = {}
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							addinfo['longitude'] = res.longitude
							addinfo['latitude'] = res.latitude
							uni.request({
								url: that.GAODE_URL,
								data: {
									key: that.GAODE_MAP_KEY,
									location: res.longitude + ',' + res.latitude
								},
								success: (r) => {
									if (r.data.status == 1) {
										addinfo['province'] = r.data.regeocode.addressComponent
											.province;
										addinfo['city'] = r.data.regeocode.addressComponent.city;
										addinfo['district'] = r.data.regeocode.addressComponent
											.district;
										addinfo['township'] = r.data.regeocode.addressComponent
											.township;
										that.adressValue = addinfo['province'] + ',' + addinfo[
												'city'] + ',' + addinfo['district'] + ',' +
											addinfo['township']
										that.addinfo = addinfo
									}
								},
								fail(err) {
									uni.showToast({
										title: '获取失败,请检查网络',
										icon: 'none'
									})
								},
							})
						}
					});
				} else {
					that.adressValue = ''
				}
			},
			getShow() {
				var that = this
				uniCloud.callFunction({
					name: 'mwj',
					data: {
						action: "getList"
					}
				}).then((res) => {
					if ((res.result.data[0].show && res.result.data[0].data) !== app.globalData.edition) {
						that.showContent = true
					} else {
						this.getComment()
					}
				}).catch((err) => {
					console.error(err)
				})
			},
			textInput(e) {
				this.value = e.detail.value;
			},
			onValueChange(e) {
				console.log(e);
				this.navvalue = e.currentItem;
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx)
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current)
				this.swiperCurrent = current
				this.current = current
			},
			callImgList: function(e) {
				this.imgsList = e;
			},
			callVadio: function(e) {
				this.srcVideo = e;
			},
			// 发布图片
			formSubmit: function(e) {
				var params = e.detail.value;
				if (this.imgsList.length == 0 && this.srcVideo == '') {
					uni.showToast({
						title: "图片或视频至少上传一种！",
						icon: 'none'
					})
					return
				}
				// 发送的内容
				params.createTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
				if (this.imgsList) {
					params.imgList = this.imgsList;
				}
				if (this.srcVideo) {
					params.srcVideo = this.srcVideo
				}
				params.userid = this.userInfo._id;
				// 谁发布的
				params.love_num = 0;
				params.view_num = 1;
				params.comment_num = 0;
				params.status = 0;
				params.value = this.value;
				if (this.addressType) {
					params.address = this.adressValue;
					params.addinfo = this.addinfo['district'];
				}
				uniCloud.callFunction({
					name: 'bbs_topic',
					data: {
						cloudAction: "save",
						params: params
					}
				}).then((res) => {
					uni.showToast({
						title: "发布成功",
						success: function(res) {
							console.log('已发布')
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}
					})
				}).catch((err) => {
					console.error(err)
				})
			}, // 点赞
			getLike(index) {
				this.commentList[index].isLike = !this.commentList[index].isLike;
				if (this.commentList[index].isLike == true) {
					this.commentList[index].likeNum++;
				} else {
					this.commentList[index].likeNum--;
				}
			},
			// 评论列表
			getComment() {
				this.commentList = [{
						id: 1,
						name: '叶轻眉',
						date: '12-25 18:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 12,
						likeNum: 33,
						isLike: false,
						replyList: [{
								name: 'uview',
								contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
							},
							{
								name: '粘粘',
								contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
							}
						]
					},
					{
						id: 2,
						name: '叶轻眉1',
						date: '01-25 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						allReply: 0,
						likeNum: 11,
						isLike: false,
						url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
					},
					{
						id: 3,
						name: '叶轻眉2',
						date: '03-25 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						allReply: 0,
						likeNum: 21,
						isLike: false,
						allReply: 2,
						url: '../../../static/logo.png',
						replyList: [{
								name: 'uview',
								contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
							},
							{
								name: '豆包',
								contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
							}
						]
					},
					{
						id: 4,
						name: '叶轻眉3',
						date: '06-20 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 0,
						likeNum: 150,
						isLike: false
					}
				];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		padding: 20upx;
	}

	.swiper-box {
		flex: 1;
		height: 90vh;
	}

	.swiper-item {
		height: 100%;
	}

	.text-title {
		background-color: #f1f1f1;
		border-radius: 20upx;
		height: 150upx;
		width: 100%;
		padding: 20upx;
	}

	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}

	.addressRight {
		text-align: right;
	}
</style>
